<template>
	<view class="main">
		<view class="top">
			<view class="top_Fixed" :style="{'height':statusBarHeight+'px'}"></view>
			<view class="top_row">
				<view class="top_left flex_left" @click="back()">
					<image class="back_icon" src="/static/img/back.png"></image>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="login_title">Account Password</view>

			<view class="input_row flex_left">
				<view class="num_box flex_center">+256</view>
				<input type="number" placeholder="Enter your phone number" v-model="phone" maxlength="20"
					placeholder-class="inp_placeholder" />
			</view>

			<view class="input_row flex_left">
				<input :password="isPassword" placeholder="Input password" v-model="password" maxlength="20"
					placeholder-class="inp_placeholder" />
				<image class="look_icon" src="/static/img/look.png" v-if="!isPassword" @click="isPassword = true">
				</image>
				<image class="look_icon" src="/static/img/look_not.png" v-if="isPassword" @click="isPassword = false">
				</image>
			</view>

			<view class="notice_word">If you forget your old password, please contact <text>customer</text> service for
				assistance
			</view>

			<view class="login_now flex_center" @click="login()">log In</view>
		</view>

		<view class="bottom_row flex_center">
			<image class="select_icon" v-if="isAgree" @click="isAgree = false" src="/static/img/select.png"></image>
			<image class="select_icon" v-if="!isAgree" @click="isAgree = true" src="/static/img/unselect.png"></image>
			<view class="bottom_row_word">
				I have read and agree to the
				<text @click="goNodes('User Agreement')">User Agreement</text>
				and
				<text @click="goNodes('Privacy Policy')">Privacy Policy</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		req_
	} from '../../api/api.js';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				phone: '',
				password: '',
				isPassword: true,
				isAgree: false
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onShow() {
			
		},
		methods: {
			// 登录
			login() {
				let that = this
				if(!that.phone){
					that.utils.toast('Please enter your phone number')
					return
				}
				if(!that.password){
					that.utils.toast('Please enter your password')
					return
				}
				that.utils.To('/pages/index/index')
			},
			// 协议
			goNodes(val) {
				this.utils.To('/pages/login/privacy?privacyName=' + val)
			},
			back() {
				this.utils.Back()
			}
		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		}
	}
</script>

<style scoped>
	.login_title {
		padding: 300rpx 0 26rpx 0;
		width: 92%;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000
	}

	.input_row {
		position: relative;
		margin: 50rpx auto;
		width: 92%;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 40rpx;
	}
	
	.num_box{
		width: 130rpx;
		height: 37rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #201B1C;
		border-right: 1rpx solid #E2E2E2;
	}

	.input_row input {
		margin-left: 42rpx;
		width: 70%;
	}

	.look_icon {
		position: absolute;
		right: 42rpx;
		width: 38rpx;
		height: 26rpx;
	}

	.notice_word {
		margin: 0 auto;
		width: 88%;
		font-size: 20rpx;
		color: #040404;
		margin-top: 120rpx;
	}

	.notice_word text {
		color: #34BA78;
		margin: 0 10rpx;
	}

	.login_now {
		margin: 20rpx auto;
		width: 92%;
		height: 80rpx;
		background: #34BA78;
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.bottom_row {
		position: absolute;
		bottom: 100rpx;
		left: 8%;
		width: 84%;
		font-size: 24rpx;
		color: #141414;
	}

	.select_icon {
		width: 24rpx;
		height: 24rpx;
	}

	.bottom_row_word {
		width: 70%;
		text-align: center;
	}

	.bottom_row_word text {
		margin: 0 10rpx;
		font-weight: bold;
		color: #34BA78;
	}
</style>